<template>
	<view>
		<p-navbar background="#001429" title="我的钱包"></p-navbar>
		<view class="tAssets">
			<view class="tAssets-title flex align-items">
				总资产
				<image :src="eyeshow?img.show:img.hide" style="width: 37rpx;height: 30rpx;margin-left: 10rpx;" @tap="eyeshow=!eyeshow" mode="aspectFit"/></image>
			
			</view>
			<view class="tAssets-number">
				{{eyeshow?point(userinfo.myMoney.balance):'****'}}
				<text style="font-size: 32rpx;margin-left: 10rpx;">USDT</text>
			</view>
			<view class="n-btc">
				≈ {{eyeshow?point(userinfo.myMoney.balance*6.5):'****'}} CNY
			</view>
			<view class="tAssets-gn flex align-items justify-between">
				<view class="gn-item flex align-items justify-center" v-for="(item,index) in gnList" :key="index" @tap="gnNav(index)">
					<image class="gn-img" :src="item.icon" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 资产明细 -->
		<view class="details">
			<view class="details-title flex align-items justify-between">
				<text class="t-text">资产明细</text>
				<image class="select" src="../../static/user/select.png" mode=""  @click="show = true"></image>
			</view>
			<view class="details-list flex align-items">
				<view class="details-item" v-for="item in 3" :key="item">
					<view class="item-text">
						{{item=='1'?'数量':item=='2'?'类型':'时间'}}
					</view>
					
				</view>
			</view>
			<view class="wallet" v-for="(item,index) in detailsList" :key="index">
				<view class="wallet-item" :class="{'color-fall':point(item.balance)<0}">{{point(item.balance)}}</view>
				<view class="wallet-item">{{item.type=='1'?'直推':'团队'}}</view>
				<view class="wallet-item">{{item.createTime}}</view>
			</view>
			<hide v-if="detailsList.length==0" />
			<u-select v-model="show" :list="selectList" @confirm="confirm"></u-select>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:{
					show:'/static/user/login-psw-show.png',
					hide:'/static/user/login-psw-hide.png',
				},
				eyeshow:true,
				gnList:[
					{
						icon:'../../static/user/tb.png',
						name:'提币'
					},
					{
						icon:'../../static/user/cb.png',
						name:'充币'
					},
					{
						icon:'../../static/user/hz.png',
						name:'互转'
					}
				],
				detailsList:[],//资产明细记录
				show: false,
				selectList: [
					
					{
						value: '1',
						label: '直推奖'
					},
					{
						value: '2',
						label: '团队奖'
					},
					{
						value: '3',
						label: '盈利手续费'
					}
				],
				page:1,
			}
		},
		computed:{
			point(){
				return t=>{
					if(!t) return '0.0000'
					return Number(t).toFixed(4)
				}
			},
			userinfo(){
				return this.$state.userinfo
			},
			str(){//截取时间
			return t=>t.substring(0,10)
			},
		},
		onLoad() {
			this.direct() 
		},
		onReachBottom(){
			this.page++
			this.direct()
		},
		methods: {
			direct(e){
				let data='';
				if(e){//筛选
					data=`&type=${e}`//类型
				}
				this.request(`vip/rewardSubsidiaryList?pageSize=20&page=${this.page}`+data).then(res=>{//资产明细
					if(this.page=1){//防止筛选导致历史数据加上来
						this.detailsList=res.data.data
					}else{
					   this.detailsList.push(...res.data.data)	
					}
				})
			},
			confirm(e){
				this.page=1;
				this.direct(e[0].value)
			},
			// 功能
			gnNav(index){
				if(index=='0'){
					uni.navigateTo({
						url:'./tibi'
					})
				}
				if(index=='1'){
					uni.navigateTo({
						url:'./chongbi'
					})
				}
				if(index=='2'){
					uni.navigateTo({
						url:'./huzhuan'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.tAssets{
		width: 680rpx;
		height: 328rpx;
		background: url(../../static/user/walletbj.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #1677FF;
		border-radius: 16rpx;
		margin: 40rpx auto;
		padding: 20rpx;
		box-sizing: border-box;
		.tAssets-title{
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: 400;
			color: #FFFFFF;
			.eye{
				width: 30rpx;
				height: 19rpx;
				margin: 8rpx 0rpx 0 10rpx;
			}
		}
		.tAssets-number{
			height: 72rpx;
			font-size: 50rpx;
			font-family: PingFang;
			font-weight: bold;
			line-height: 72rpx;
			color: #FFFFFF;
		}
		.n-btc{
			height: 34rpx;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 400;
			line-height: 34rpx;
			color: rgba(255, 255, 255, 0.45);
		}
		.tAssets-gn{
			.gn-item{
				width: 30%;
				height: 88rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				margin-top: 70rpx;
				line-height: 88rpx;
				text-align: center;
				position: relative;
				&::after{
					content: "";
					width: 0;
					height: 40%;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					border: 1px solid rgba(#fff,0.15);
				}
				.gn-img{
					height: 38rpx;
					width: 42rpx;
					margin-right: 10rpx;
				}
				&:last-child{
					&::after{
						border: none;
					}
				}
			}
			
		}
	}
	.details{
		padding: 0 34rpx;
		box-sizing: border-box;
		.details-title{
			margin-right: 22rpx;
			margin-bottom: 40rpx;
			.t-text{
				font-size: 36rpx;
				font-family: PingFang;
				font-weight: 400;
				color: #FFFFFF;
			}
			.select{
				width: 26rpx;
				height: 28rpx;
			}
		}
		.details-list{
			margin-bottom: 15rpx;
			line-height: 70rpx;
			.details-item{
				border-bottom: 1px solid  rgba(255, 255, 255, 0.15);
				.item-content{
					margin: 20rpx 0;
				}
				&:first-child{
					width: 30%;
				}
				&:nth-child(2){
					width: 25%;
				}
				&:last-child{
					width: 45%;
					text-align: right;
				}
			}
		}
	}
    .wallet{
		@include flex;
		justify-content: space-between;
		line-height: 70rpx;
		.wallet-item{
			&:first-child{
				width: 30%;
				color: $color-rise;
				font-weight: bold;
			}
			&:nth-child(2){
				width: 25%;
				// border: 1px solid red;
			}
			&:last-child{
				color: $color-fu;
				width: 45%;
				text-align: right;
			}
		}
	}
</style>
